<script setup lang="ts">
 import { ref, watch } from 'vue'
 const props = defineProps({
   activeIndex:{
     type: Number,
     default: 0
   },
   cascaderShow: {
     type: Boolean,
     default: false,
   },
   //开启一级选择
   oneSelect: {
     type: Boolean,
     default: false,
   },
   //label展示字段
   labelName: {
     type: String,
     default: 'name'
   },
   //value选中字段
   valueName: {
     type: String,
     default: 'id'
   },
   changeTwoFun:{
     type:Function,
     default:null
   },
   //placeholder
   placeholder: {
     type: String,
     default: '请选择'
   },
   //初始选中值
   selectValue: {
     type: Array,
     default: () => {
       return [];
     }
   },
   //选择数据
   cascaderData: {
     type: Array,
     default: () => {
       return [];
     }
   }
 })
 const emit = defineEmits(['confirm'])
 const current = ref(props.activeIndex)
 const select_ids = ref<any[]>(props.selectValue)
 const select_names = ref<any[]>([])
 const showPop = ref(props.cascaderShow)
 const selectDataCopy = ref(props.cascaderData)
 const selectData = ref<any[]>(props.cascaderData)
 watch(() => props.cascaderData, (val) => {
   selectData.value = JSON.parse(JSON.stringify(val))
   selectDataCopy.value = JSON.parse(JSON.stringify(val))
 })

 const show = () => {
   defaultSelect()
   showPop.value = true
 }

 const hide = () => {
   showPop.value = false
 }

 const defaultSelect = () => {
   select_ids.value = props.selectValue
   for(let y = 0; y < selectData.value.length; y++){
     if(props.selectValue.indexOf(selectData.value[y][props.valueName]) > -1){
       selectData.value[y].active = true
     }else{
       selectData.value[y].active = false
     }
     if(selectData.value[y].children.length > 0){
       for(let x = 0; x < selectData.value[y].children.length; x++){
         if(props.selectValue.indexOf(selectData.value[y].children[x][props.valueName]) > -1){
           selectData.value[y].children[x].active = true;
           selectData.value[y].child_active = true;
         }else{
           selectData.value[y].children[x].active = false;
           selectData.value[y].child_active = false;
         }
       }
     }
   }
 }

 /*选中切换*/
 const checkboxChange = (e:any, index:number) => {
   selectData.value[index].avtive = e.value
 }

 const selectOne = (index:number) => {
   current.value = index
 }

 const selectTwo = (item:any, index:number) =>{
   if(props.changeTwoFun && !props.changeTwoFun(item,select_ids.value,select_names.value)){
      return false
   }
   let twoData = selectData.value[current.value]
   if(item.active){
     item.active = false
     twoData.child_active = false
   }else{
    twoData.children.map((ite:any) => {
      ite.active = false
      return ite
    })
     item.active = true
     twoData.child_active = true
   }
   select_ids.value = []
   select_names.value = []
   selectData.value.map((item:any) => {
     if(item.children && item.children.length > 0){
       item.children.map((it:any) => {
         if(it.active){
           select_ids.value.push(it[props.valueName])
           select_names.value.push(it[props.labelName])
         }
       })
     }else if(item.active && props.oneSelect){
       select_ids.value.push(item[props.valueName])
       select_names.value.push(item[props.labelName])
     }
   })
 }

 const cancelSelect = () => {
   selectData.value = JSON.parse(JSON.stringify(selectDataCopy.value))
   showPop.value = false
 }

 const confirmSelect = () => {
   let data = selectData.value
   select_ids.value = []
   select_names.value = []
   data.map((item:any) => {
     if(item.children && item.children.length > 0){
       item.children.map((it:any) => {
         if(it.active){
           select_ids.value.push(it[props.valueName])
           select_names.value.push(it[props.labelName])
         }
       })
     }else if(item.active && props.oneSelect){
       select_ids.value.push(item[props.valueName])
       select_names.value.push(item[props.labelName])
     }
   })
   emit('confirm',{ids:select_ids.value,names:select_names.value})
   showPop.value = false
 }
 const getInitData = (data:any,selectList:any,callBlack:any) => {
   let select_ids: any[] = [];
   let select_names: any[] = [];
   for(let y = 0; y < data.length; y++){
     if(selectList.indexOf(data[y][props.valueName]) > -1){
       data[y].active = true
     }else{
       data[y].active = false
     }
     if(data[y].children.length > 0){
       for(let x = 0; x < data[y].children.length; x++){
         if(selectList.indexOf(data[y].children[x][props.valueName]) > -1){
           data[y].children[x].active = true;
           data[y].child_active = true;
           select_ids.push(data[y].children[x][props.valueName])
           select_names.push(data[y].children[x][props.labelName])
         }else{
           data[y].children[x].active = false;
           data[y].child_active = false;
         }
       }
     }
   }
   if(typeof callBlack == 'function'){
     callBlack({ids:select_ids,names:select_names})
   }
 }

 defineExpose({show,hide,getInitData})
</script>

<template>
  <up-popup round="10" :show="showPop" mode="bottom">
    <view class="cascader-head">
      <text class="cancel" @click="cancelSelect">取消</text>
      <text class="title">{{placeholder}}</text>
      <text class="confirem" @click="confirmSelect">确定</text>
    </view>
    <view class="cascader">
      <scroll-view class="item" style="width: 300rpx;" scroll-y="true">
        <view class="item-block" v-for="(item,index) in selectData" :key="index"
              :style="{'background':current==index?'white':'#f8f8f8','color':item.child_active?'#80C859':'#333333'}"
              @click="selectOne(index)">
          <u-checkbox active-color="#f44c01" v-if="oneSelect" @change="checkboxChange($event,index)"
                      v-model="item.active">
          </u-checkbox>
          <view style="flex: 1;">
            <text>{{item[labelName]}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view class="item" style="background-color: white;" scroll-y="true">
        <block v-if="selectData.length>0&&selectData[current].children.length>0">
          <view class="item-cellbox">
            <text
              v-for="(item,index) in selectData[current].children" :key="index"
              class="item-cell"
              @click="selectTwo(item,index)"
              :style="{color:item.active?'#ffffff':'#666666',background:item.active?'#80C859':'#f8f8f8'}">{{item[labelName]}}</text>
          </view>
        </block>
      </scroll-view>
    </view>
  </up-popup>
</template>

<style scoped lang="scss">
  .cascader-head {
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #e6e6e6;
    .cancel {
      font-size: 28rpx;
      color: #666666;
    }
    .title {
      font-size: 28rpx;
      color: #333333;
    }
    .confirem {
      font-size: 28rpx;
      color: #80C859;
    }
  }

  .cascader {
    display: flex;
    flex-direction: row;
    height: 800rpx;
    background-color: #F8F8F8;
    .item {
      height: 800rpx;

      .item-block {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 80rpx;
        padding: 20rpx;
        font-size: 26rpx;
        color: #333333;
      }
      .item-cellbox {
        padding-left: 15rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        .item-cell {
          padding: 0 20rpx;
          height: 50rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background-color: #F8F8F8;
          margin-right: 15rpx;
          font-size: 24rpx;
          color: #666666;
          margin-top: 20rpx;
          border-radius: 10rpx;
        }

      }
      .active {
        color: #ffffff;
        background: #fa3534;
      }
    }
  }

</style>
